<template>
 <div class="login" :style="backgourndStyle" >
    <div style="height:100px  "></div>
         <div style="height:300x">
                <el-row type="flex" justify="center" style="height:300x">
                    <el-form ref="loginform" :model="user" :rules="rules" status-icon label-width="80px"  class="loginContainer" >
                        <el-form-item label="用户名" prop="name">
                            <el-input v-model="user.name"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="user.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary"  @click="login">登录</el-button>
                            <el-button type="primary"  @click="zhuce">注册</el-button>
                        </el-form-item>
                    </el-form>
                </el-row>
         </div>

 </div>
</template>

<script>
    export default {
        
        name:"login",
        data () {
            return {
                user: {name:"",password:""},
                rules: {
                    name: [
                        {required: true, message: '用户名不能为空', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ]
                },
                
                
            }
            
        },
        methods: {
            login () {
                this.$refs.loginform.validate((async valid=>{
                    if(!valid) return;
                    const result=await this.$http.post("/users/login",this.user);
                    console.log(result.data.date.code);
                    if(result.data.date.code!==200) {
                        this.$message({showClose: true,message:'登录失败' ,type:'error'});
                    }else{
                        this.$message({showClose: true,message:'登录成功', type:'success'});
                        localStorage.setItem("n",this.user.name)
                        // var username=sessionStorage.getItem("name")
                        // console.log(username);
                        this.$router.push("/home");
                    }
                    
                    // if(res.meta.status !==200) return  console.log("登录失败")
                    // if(result.date.code!==200) return console.log("登录失败")
                    // console.log('登录成功')
                }));
            },
            //重铸表单
            resetloginform(){
                this.$refs.loginform.resetFields((valid)=>{
                    console.log(valid);
                });
            },
            zhuce(){
                this.$router.push('/zhuce');
            },

        },

         computed:{
            backgourndStyle: function() {
                // 计算body可用高度
                let cHeight = window.outerHeight - (window.outerHeight - window.innerHeight)
                // 计算背景图
                let imgs = ["http://bookstore.zealon.cn/0-1.jpg","http://bookstore.zealon.cn/0-2.jpg","http://bookstore.zealon.cn/0-6.png"]
                let imgName = imgs[Math.floor(Math.random() * 3)]
                let style = "background-image:url('" + imgName + "'); background-repeat: round; height:" + cHeight + "px;";
                return style
            }
        },
        
    }
</script>
<style >
    .loginContainer {
        border-radius: 8px;
        background-clip: padding-box;
        width: 265px;
        padding: 5px 40px 2px 40px;
        background: #fff;
    }

    .loginTitle {
        margin: 15px auto 20px auto;
        text-align: center;
        color: #505458;
        font-size:24px
    }

</style>